<script setup>
import { ref, defineProps, defineEmits } from 'vue'
//
import { todosStore } from '../store/todos.js'
//
import { storeToRefs } from 'pinia'
import { useRouter } from 'vue-router'
const router = useRouter() 
//
const todosstore = todosStore()
const { detailtodo } = storeToRefs(todosstore)
//
const props = defineProps(['todo'])
const emits = defineEmits()

const delItem = () => {
    emits('del', props.todo.id)
}
const changeCompleted = () => {
    emits('changecompleted', props.todo.id)
}
//进入待办事项的detail
const gotothistododetail = () => {
    detailtodo.value=props.todo
    router.push(`/detail/${props.todo.id}`)
}

</script>
<template>
    <div id="item">
        <!-- <input type="checkbox" v-model="todo.completed"> -->
        <input type="checkbox" @change="changeCompleted">
        <label :class="{ completed: props.todo.completed }" @click="gotothistododetail">{{ props.todo.content }}</label>
        <button @click="delItem">X</button>
    </div>
</template>
<style lang="scss" scoped>
.completed {
    color: #d3d3d3;
    text-decoration: line-through;
}

#item {
    margin: 10px 0;

    label {
        font-size: 20px;
        padding-left: 20px;
    }

    span {
        font-size: 20px;
        padding-left: 20px;
    }

    button {
        display: none;
        background: none;
        border: none;
        font-size: 20px;
        color: #d13131;
        float: right;
    }

    &:hover {
        button {
            display: inline;
        }
    }
}

// #item:hover button {
//     display: inline;
// }
</style>
